<template>
    <div class="edit-address" ref="editAddress">

        <div id="content">
            <cube-scroll>
                <div id="form">
                    <cube-form
                            ref="form"
                            :model="model"
                            :schema="schema"
                            :submitAlwaysValidate="true"
                            @submit="sendSubmit"
                    ></cube-form>
                </div>
            </cube-scroll>
        </div>

        <div id="footer">
            <cube-button
                    class="submit-btn"
                    :inline="true"
                    @click="submit"
                    >
                保存
            </cube-button>
        </div>

    </div>
</template>

<script>
    import areas from "../../../../home/children/goods/children/create/components/area/Area";
    import plugin from "../../../../../util/plugin";
    export default {
        name:'edit-address',
        data(){
            return {
                api:"",  //请求地址
                address_id:0,  //修改的地址id
                model:{
                    name:"",
                    phone:"",
                    area:[],
                    address:""
                },
                schema:{
                    fields: [
                        {
                            type:'input',
                            modelKey:'name',
                            label:'收货人',
                            props:{
                                type:'text',
                                placeholder:'收货人'
                            },
                            rules:{
                                required:true,
                                type:'string',
                                max:10
                            },
                            messages:{
                                required:'请输入收货人',
                                max:'收货人长度不能大于10'
                            }
                        },
                        {
                            type:'input',
                            modelKey:'phone',
                            label:'手机号码',
                            props:{
                                type:'text',
                                placeholder:'请填写收货人手机号'
                            },
                            rules:{
                                required:true,
                                type:'number',
                                pattern:/^1[3456789]\d{9}$/
                            },
                            messages:{
                                required:'请输入联系电话',
                                pattern:'请输入正确的联系电话'
                            }
                        },
                        {
                            type:areas,
                            modelKey:'area',
                            label:"所在地区",
                            rules:{
                                required:true
                            }
                        },
                        {
                            type:"textarea",
                            modelKey:'address',
                            label:"详细地址",
                            props: {
                                placeholder: "街道、楼牌号等"
                            },
                            rules:{
                                required:true,
                                min:1
                            }
                        }
                    ]
                }
            }
        },
        created() {
            let {address_id} = this.$route.params;
            this.address_id = parseInt(address_id);
            if(this.address_id === 0){
                this.getApi();
            }else{
                this.getOne();
            }
        },
        mounted() {
            let inputs = this.$refs.editAddress.querySelectorAll("input");
            inputs.forEach((item)=>{
                item.addEventListener("blur",()=>{
                    window.scroll(0,0);
                });
            });
            let textarea = this.$refs.editAddress.querySelectorAll("textarea");
            textarea.forEach((item)=>{
                item.addEventListener("blur",()=>{
                    window.scroll(0,0);
                });
            });
        },
        methods:{
            // Run
            /**
             * 获取API
             */
            getApi() {
                plugin.getApi('address')
                .then((api)=>{
                    this.api = api;
                })
            },
            /**
             * 获取一个地址数据
             */
            getOne(){
                plugin.getApi("address")
                .then((api)=>{
                    this.api = api;
                    this.$url("address/easyFind",{
                        address_id:this.address_id,
                        return:["name","phone","area","address"]
                    },api)
                    .then((res)=>{
                        if(res.data.status === "success"){
                            let {name,phone,area,address} = res.data.data;
                            this.model = {
                                name,phone,area,address
                            }
                        }
                    })
                })
            },
            // Handel
            /**
             * 点击底部按钮
             */
            submit(){
                this.$refs.form.submit();
            },
            /**
             * 提交编辑地址
             */
            sendSubmit(){
                let  doing = "address/";
                if(this.address_id === 0){
                    doing += "add";
                }else{
                    doing += "edit";
                }
                this.$url(doing,{
                    uid:this.$sysinfo.uid,
                    data:this.model,
                    address_id:this.address_id
                },this.api)
                .then((res)=>{
                    if(res.data.status === "success"){
                        this.$router.go(-1);
                    }else{
                        this.$createToast({
                            time: 1000,
                            type:"error",
                            txt:"操作失败"
                        }).show();
                    }
                });
            }
        }
    }
</script>

<style scoped lang="less" src="./edit.less"></style>
